<html>
  <head>
    <link rel="stylesheet" type="text/css" href="options.css">
    <style>
      * {
        margin: 0px;
        padding: 0px;
      }

      #helpText, #optionsLink, #state {
        font-family : "Helvetica Neue", "Helvetica", "Arial", sans-serif;
        font-size: 12px;
      }

      #helpText, #stateLine, #state { color: #979ca0; }

      #saveOptions {
        margin-top: 5px; /* Match #exclusionAddButton */
        margin-left: 5px;
        float: right;
      }

      #state {
        padding-left: 5px;
        background: #f5f5f5;
        width: 100%;
        border-bottom: 1px solid #979ca0;
        margin: 0px;
      }

      /* These are overridden from options.css. */

      #endSpace, #footerWrapper { width: 500px; }
      #footerWrapper { margin-left: 0px; }

      /* Make exclusionScrollBox smaller than on the options page, because there are likely to be fewer
         matching rules, and the popup obscures the underlying page.
       */
      #exclusionScrollBox {
        max-height: 124px;
        min-height: 124px;
      }

      #endSpace { /* Leave space for the fixed footer. */
        min-height: 40px;
        max-height: 40px;
      }

    </style>
    <script src="../lib/utils.js"></script>
    <script src="../lib/dom_utils.js"></script>
    <script src="../lib/settings.js"></script>
    <script src="options.js"></script>
  </head>
  <body>
    <div id="state"></div>

    <div id="exclusionScrollBox">
      <!-- Populated from exclusions.html by options.coffee. -->
    </div>

    <!-- Some extra space which is hidden underneath the footer. -->
    <div id="endSpace"/>

    <div id="footer">
      <div id="footerWrapper">
        <table>
          <tr>
            <td id="stateLine" style="width: 99%">
              <span id="helpText">These are the rules matching this page.</span>
              <br/>
              <span id="versionAndOptions">
                <a id="optionsLink" target="_blank" tabindex="99999">Options</a> (version <span id="versionNumber"></span>).
              </span>
            </td>
            <td valign="top">
              <button id="exclusionAddButton">Add Rule</button>
            </td>
            <td valign="top">
              <button id="saveOptions" disabled="true">No Changes</button>
            </td>
          </tr>
        </table>
      </div>
    </div>
  </body>
</html>
